<template>
  <div class="search_back" >
    <div class="header" >
      <div class="city" @click="$router.push({path:'/NewPos'})">
        <p :class="{up: showCity}">{{city}}</p>
        <!-- <div class="hide_city">上海</div> -->
        <transition enter-active-class="bounceDown" leave-active-class="bounce" v-if="showCity">
          <!-- 城市切换 -->
          <ul class="chooseCity">
            <li @click="chooseCity(item)" v-for="(item, index) in cities" :key="index">{{item}}</li>
          </ul>
        </transition>
      </div>
      <div class="search">
        <input type="text" name="" value="" placeholder="输入商户名称" @click="focusHandle">
        <span class="icon-btn"><i class="iconfont icon-sou"></i></span>
      </div>
    </div>
    <ul class="groups">
      <li v-for="(item,index) in functions" :key="index" @click="funClick(item.type)">
        <div class="fun_icon"><p class='have_message' v-show="hasMessage" v-if="item.name=='消息'"></p><i class="iconfont"
                                                                                                        :class="item.icon"></i>
        </div>
        <p>{{item.name}}</p>
      </li>
    </ul>
     <ul class="groups" style="background-color: #ec4e8a;" :class="{'fixedBar': isFixed}"  v-if="isFixed">
      <li v-for="(item,index) in functions" :key="index" @click="funClick(item.type)">
        <div class="fun_icon"><p class='have_message' v-show="hasMessage" v-if="item.name=='消息'"></p><i class="iconfont"
                                                                                                        :class="item.icon"></i>
        </div>
        <p>{{item.name}}</p>
      </li>
    </ul>
  </div>
</template>
<script>
  import * as types from '../../vuex/types.js'
  import getData from '../../service/getData.js'
  import getData2 from '../../service/getData2.js'
  import getData4 from '../../service/getData4.js'
  import {mapState} from 'vuex'
  import {Toast, Indicator} from 'mint-ui'
  //  import {
  //      centerInfo
  //  } from '../../service/getData3.js'
  import {Storage} from 'src/utils/storage.js'
  import {Common} from 'src/utils/common.js'

  export default {
    name: "home-header",
    data: () => ({
      functions: [
        {icon: 'icon-RichScan', name: '扫一扫', type: 'scan'},
        {icon: 'icon-user-code', name: '账户码', type: 'code'},
        {icon: 'icon-ticket-bag', name: '商券', type: 'ticket'},
        {icon: 'icon-message-copy', name: '消息', type: 'message'}
      ],
      showCity: false,
      cities: ['全部', '上海', '福州', '北京', '桂林', '烟台', '龙岩', '合肥', '厦门', '焦作', '南京', '杭州', '深圳', '汕头'],
      hasMessage: true,
    }),
    props: {
      city: {
        type: String,
        default: '上海'
      },
      'isFixed': {
        type: Boolean,
        default: false
      },
    },
    computed: {
      ...mapState({
        userInfo: state => state.user.userInfo, //用户信息
        historyList: state => state.coupon.historyList, // 搜索关键字
        searchType: state => state.coupon.searchType, // 搜索类型
        keyWord: state => state.coupon.searchKey // 搜索类型
      }),
    },
    async activated() {
      let usrId = this.userInfo.usrId;
      this.hasMessage = (await getData4.getUsrInfo({usrId})).content.unreadCount;
    },
    methods: {
      chooseCity: function (city) {
        this.$emit('change-city', city);
      },
      focusHandle() {
        this.$router.push({
          name: 'newSearch',
          query: {type: 'home'}
        })
        this.$store.commit('search_type', 'mecth')//保证每次进去都是商户
      },
      funClick(type) {
        if (type === 'scan') {
          this.scan()
        } else if (type === 'code') {
          this.$router.push({
            name: 'changeUserInfo',
            params: {infoType: 'code'}
          })
        } else if (type === 'ticket') {
          this.$router.push({path: '/cardList', query: {jump: 1}})
        } else if (type === 'message') {
          this.$router.push({
            name: 'infoList'
          })
        }
      },
      scan: function () {
        let me = this;
        new Promise((resolve, reject) => {
          wx.scanQRCode({
            needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
            scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
            success: function (res) {
              var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
              let queryObject = {};
              if(result.indexOf('?') >= 0){
                result.split('?')[1].split('&').forEach(data => queryObject[data.split('=')[0]] = data.split('=')[1]); // 获取url上的每个参数集成在jumpPageObject对象
              }
              if (result.indexOf('payIndex') >= 0) {
                // Indicator.open("订单查询中...");
                me.$store.commit('changeState', true)
                me.$router.push({
                  'name': 'payIndex',
                  query: queryObject

                });
              } else if (result.indexOf('positiveScan') >= 0) {
                me.$router.push({
                  'name': 'positiveScan',
                  query: queryObject
                });
              } else {
                resolve(result);
              }

            }
          });
        }).then(rep => {
          let obj = JSON.parse(rep.substr(rep.indexOf("V=") + 2, rep.length - 1));
          if (obj.usrId) {
            if (obj.usrId == me.userInfo.usrId) {
              Toast({
                message: "不能添加自己为好友",
                duration: 800
              });
              return;
            }
            me.$store.commit(types.search_friend, {id: obj.usrId})
            me.$router.push({
              "path": '/addFriend'
            })
            //扫一扫圈友号二维码，加圈友，跳转圈友详情页面
            getData.searchFriend({
              method: 'post',
              data: {
                friendId: obj.usrId,
                usrId: me.userInfo.usrId
              }
            }).then(function (rep) {
              if (rep.respCode == '00') {
                if (rep.content) {
                  me.$store.commit("search_friend", rep.content);
                  me.$router.push({
                    "path": '/addFriend'
                  })
                } else {
                  Toast({
                    message: "用户不存在",
                    duration: 800
                  });
                }
              } else {
                Toast({
                  message: rep.errorInfo,
                  duration: 800
                });
              }
            })
          } else {
            Toast({
              message: "二维码不正确",
              duration: 800
            });
          }
        }).catch(error => {
          Toast({
            message: "二维码不正确",
            duration: 800
          })
        });
      }
    }
  }
</script>
<style>
  .have_message {
    position: absolute;
    top: -3%;
    right: 37.5%;
    z-index: 1;
    width: .6rem;
    height: .6rem;
    background: #f00;
    border-radius: 1rem;
  }
</style>
<style lang="scss" scoped>
  $radius: 3px;
  $space: 0.6rem;
  $font_size: 0.9rem;

  .fixedBar {
    position: fixed !important;
    top: 0;
    width: 100%;
    z-index: 76;
  }

  .search_back {
    // background: linear-gradient(to right, #eb4e8a, #f95a7c);
    background-color: #ec4e8a
  }

  .header {
    padding: $space;
    font-size: $font_size;
    color: #fff;
    .city, .search {
      float: left;
      border-radius: $radius;
      box-sizing: border-box;
      height: 2.4rem;
      // min-height: 2.2rem;
    }
    .city {
      width: 25.5%;
      -webkit-border-radius:21px;
      -moz-border-radius:21px;
      border-radius:21px;
      text-align: center;
      background-color: rgba(238, 96, 150, 1);
      padding: $space;
      margin-right: 2%;
      position: relative;
      /*padding-left: 1.6rem !important;*/
      /*background-image: url('../../images/site.png');*/
      /*background-size: 13%;*/
      /*background-repeat: no-repeat;*/
      /*background-position: .6rem center;*/
      .hide_city {
        position: absolute;
        top: 0;
        padding: 0.6rem 0;
        z-index: -1;
        opacity: 0;
      }
      ul.chooseCity {
        position: absolute;
        width: 100%;
        top: 100%;
        left: 0;
        transform: translate(0, -3px);
        border-radius: 0 0 3px 3px;
        background-color: rgba(238, 96, 150, 1);
        z-index: 10000;
        li {
          padding: $space;
          width: 100%;
          // background-color: rgba(238, 96, 150, 1);
          text-align: center;
        }
      }
      p {
        padding-right: 1.5rem !important;
        background-image: url('../../images/down.png');
        background-size:16%;
        background-repeat: no-repeat;
        background-position:3.4rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: $font_size;
        &.up {
          background-image: url('../../images/up.png');
        }
      }
    }

    .search {
      width: 71.5%;
      -webkit-border-radius:21px;
      -moz-border-radius:21px;
      border-radius:21px;
      padding: $space;
      // background-color: rgba(238, 96, 150, 1);
      // background: linear-gradient(to right,  rgba(238, 96, 150, 1), rgba(255, 255, 255, 0.1));
      background-color: #ee6096;
      padding-right: 10%;
      position: relative;
      input {
        text-indent:.5rem;
        background-color: rgba(255, 255, 255, 0);
        font-size: $font_size;
        border-radius: $radius;
        color: #fff;
        width: 100%;
        &::placeholder { /* WebKit browsers */
          color: #fff;
        }
      }
      .icon-btn {
        position: absolute;
        right: 0.5rem;
        top: 50%;
        transform: translate(0, -50%);
        i {
          font-size: 1.2rem !important;
        }
      }
    }
    &:after {
      display: block;
      content: '';
      clear: both;
    }
  }

  ul.groups {
    padding: 0.6rem 0;
    overflow: hidden;
    width: 100%;
    li {
      float: left;
      width: 25%;
      font-size: 1rem;
      color: #fff;
      text-align: center;
      .fun_icon {
        margin-bottom: $space - 0.2;
        position: relative;
        i {
          font-size: 1.8rem;
        }
      }
    }
  }
</style>
